<!-- 工作时长 -->

<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">工作时间记录</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>
			<view class="top-line"></view>
			<view class="top-back">
				<view class="top-right top-right-left" @click="exportAction">
					<view class="top-exit">导出</view>
				</view>
				<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
					<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
					<image v-if="!screenSelect" class="top-icon" src="../../../static/select.png"></image>
					<image v-if="screenSelect" class="top-icon" src="../../../static/select_select.png"></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="uni-container">
				<uni-table ref="table" :loading="loading" stripe emptyText=" ">
					<uni-tr>
						<uni-th align="left" width="120">工作日期</uni-th>
						<uni-th align="left">工作内容</uni-th>
						<uni-th align="left" width="80">工作时长</uni-th>
						<uni-th align="left">工作律师</uni-th>
						<uni-th align="left">登记人</uni-th>
						<uni-th align="left">登记时间</uni-th>
						<uni-th align="left">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="left">{{ item.workDate }}</uni-td>
						<uni-td align="left">{{ item.workContent }}</uni-td>
						<uni-td align="left">{{ item.workDuration }}
						</uni-td>
						<uni-td align="left"><text v-for="(value,ind) in item.lawyers"
								:key="ind">{{value.account.realName}}<text
									v-if="ind < item.lawyers.length - 1">,</text></text></uni-td>
						<uni-td align="left">{{ item.editAt?item.editAt:item.createAt }}</uni-td>
						<uni-td align="left">{{ item.editTime?item.editTime:item.createTime  }}</uni-td>
						<uni-td align="left">
							<view style="display: flex;">
								<view class="item-blue-text" @click="delAction(item)">删除</view>
								<view style="margin-left: 12px;" class="item-blue-text" @click="editAction(item)">编辑
								</view>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="search-back" v-if="tableData.length == 0">
					<image class="search-image" :src="pc_search_nodata"></image>
					<view class="search-noresult">没有查询到结果</view>
				</view>
			</scroll-view>

			<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
				<view v-if="showScreen " class="screen-back">
					<uni-forms ref="baseForm" :modelValue="workFormData" style="width:200px;">
						<uni-forms-item>
							<uni-easyinput v-model="workFormData.accountQuery.realName" placeholder="工作律师" />
						</uni-forms-item>
						<uni-forms-item>
							<view style="display: flex;justify-content: space-between;">
								<view class="date-select-back" @click="openDatetimePicker(0)">
									<image class="dateimage" src="../../../static/pc_date.png"></image>
									<view v-if="workFormData.workstart" class="date-select-time">
										{{workFormData.workstart}}
									</view>
									<view v-else class="date-select-plac">工作日期起</view>
								</view>
								<view class="date-select-back" @click="openDatetimePicker(1)">
									<image class="dateimage" src="../../../static/pc_date.png"></image>
									<view v-if="workFormData.workend" class="date-select-time">
										{{workFormData.workend}}
									</view>
									<view v-else class="date-select-plac">工作日期止</view>
								</view>
							</view>
						</uni-forms-item>
						<view class="select-bottom">
							<view class="select-bottom-left" @click="selectReset">重置</view>
							<view class="select-bottom-right" @click="selectSureAction">筛选</view>
						</view>
					</uni-forms>
				</view>
			</popSelect>
			<dateTimeSelect ref="myPicker" :type='date' @submit="handleSubmit" :start-year="2020" :end-year="2030" />
			<dateTimeSelect ref="lawyerPicker" :type='date' @submit="handleSubmit" :start-year="2020"
				:end-year="2030" />
			<dateTimeSelect ref="custPicker" :type='date' @submit="handleSubmit" :start-year="2020" :end-year="2030" />
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<addWorkTime v-if="showAddClass" :lawyerLists='lawyerList' :selectItem='selectItem' :editType='editType'
				v-on:successBack='updataRequest()' @addWorkTimeClose='clickWorkTimeClose'></addWorkTime>
		</view>
	</view>
</template>

<script>
	import statusTag from "@/packageC/PhonePC/components/tags/tags.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	import selectxy from "@/components/select-cy/select-cy.vue"
	import addWorkTime from "@/packageC/PhonePC/workTime/addWorkTime.vue"
	let app = ''

	export default {
		components: {
			statusTag,
			popSelect,
			selectxy,
			addWorkTime
		},

		props: {
			ID: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				role: '', //当前登录角色
				roleUrl: '',
				tableData: [],
				screenx: 0,
				screeny: 0,
				showScreen: false,
				workFormData: {
					accountQuery: {
						realName: ''
					},
					workstart: "",
					workend: '',
				},
				screenSelect: false,
				dateSelectIndex: 0,
				statusRangeList: [], //案件状态
				selectItem: {},
				showAddClass: false,
				lawyerList: [],
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png',
				editType: ''
			}
		},
		mounted() {
			var _this = this;
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			this.requestData();
			this.requestStatusDicData();
			this.requestLawyerList();
		},
		methods: {
			async updataRequest() {
				this.requestData()
			},
			//网络请求示例
			async requestData() {
				let _this = this
				var url = `/${_this.roleUrl}/caseWorkLog/list`;
				let parmas = {
					size: '10000',
					caseId: this.ID
				};
				if (this.screenSelect) {
					if (_this.workFormData.accountQuery.realName) {
						this.$set(parmas, 'accountQuery', _this.workFormData.accountQuery)
					}
					if (_this.workFormData.workstart && !_this.workFormData.workend) {
						this.$set(parmas, 'workDate', 'ge:' + _this.workFormData.workstart)
					}
					if (!_this.workFormData.workstart && _this.workFormData.workend) {
						this.$set(parmas, 'workDate', 'le:' + _this.workFormData.workend)
					}
					if (_this.workFormData.workstart && _this.workFormData.workend) {
						this.$set(parmas, 'workDate', 'bt:' + _this.workFormData.workstart + ',' + _this
							.workFormData.workend)
					}
				}

				const res = await this.$myRequest({
					url: url,
					method: 'POST', //默认是GET
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i]

						if (item.workDate) {
							var strs = item.workDate.split(' ');
							item.workDate = strs[0];
						}
						var lawyerArr = [];
						for (var j = 0; j < item.lawyers.length; j++) {
							var value = item.lawyers[j];
							if (value.status.code == '1') {
								lawyerArr.push(value)
							}
						}
						item.lawyers = lawyerArr;
						arr.push(item)
					}
					_this.tableData = arr;

				}
			},

			//常用律师：网络请求
			async requestLawyerList() {
				let _this = this
				var url = "/admin/lawyer/selector";
				let parmas = {
					size: '10000',
					status: '1'
				};
				const res = await this.$myRequest({
					url: url,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.lawyerList = res.data.data;
				}
			},

			//导出
			exportAction() {
				var _this = this;
				let url = getApp().globalData.baseUrl + `/${_this.roleUrl}/caseWorkLog/export`;

				uni.downloadFile({
					url: url,
					header: {
						"Content-Type": "application/x-xls",
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					},
					success: function(res) {
						wx.hideLoading();
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
						}).then(save => {
							console.log('保存成功', save)
						}).catch(error => {
							console.log('保存失败', error)
						})
					},
					fail: function(err) {
						wx.hideLoading();
						console.log('下载失败：', err);
					},
				});
			},
			//案件状态
			async requestStatusDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/$Status$cases",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.statusRangeList = arr;
					console.log(_this.statusRangeList)
				}
			},

			async updataRequest() {
				this.requestData()
			},

			// 日期选择打开picker
			openDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.myPicker.show();
			},

			// 日期选择关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			// 律师日期选择打开picker
			openLawyerDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.lawyerPicker.show();
			},
			openCustDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.custPicker.show();
			},

			//日期选择
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				var time = `${e.year}-${e.month}-${e.day} `;
				if (this.dateSelectIndex == 0) {
					this.workFormData.workstart = time;
				} else if (this.dateSelectIndex == 1) {
					this.workFormData.workend = time;
				}
			},

			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},

			//筛选重置
			selectReset() {
				this.workFormData = {
						accountQuery: {
							realName: ''
						},
						workstart: "",
						workend: '',
					},
					this.requestData();
				this.screenSelect = false;
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestData()

			},
			delAction(item) {
				this.selectItem = item;
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this

				let parmas = {
					'ids': this.selectItem.id,
				}
				const res = await this.$myRequest({
					url: "/admin/caseWorkLog",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestData()
				}
			},
			//编辑
			editAction(item) {
				this.editType = 'edit'
				this.selectItem = item
				this.showAddClass = true;
			},
			//关闭编辑
			clickWorkTimeClose() {
				this.showAddClass = false;
			},

			dialogClose() {
				console.log('点击关闭')
			},
			closeBtnAction() {
				this.$emit('workTimeClose')
			},
			moveHandle() {
				return true
			},

		}
	}
</script>

<style scoped>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 800px;
		height: 491px;
		padding: 24px;
		max-height: 491px;
		background-color: white;
		margin-top: -70px;
		border-radius: 4px;
		z-index: 11;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		display: flex;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 0px 10px;
		border-radius: 5px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		width: auto;
		height: 390px
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.top-selected {
		cursor: pointer;
		font-size: 18px;
		font-weight: normal;
		color: #2DA9C5;
		border-bottom: #2DA9C5 1px solid;
		height: 35px;
		width: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40px;
	}

	.top-select {
		font-size: 18px;
		font-weight: normal;
		color: #333;
		cursor: pointer;
		height: 35px;
		width: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40px;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.topselect-back {
		display: flex;
		margin-left: 40px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.top-btn-selected {
		width: 76px;
		height: 24px;
		background: #E8F7FB;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-btn-select {
		width: 76px;
		height: 24px;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content-img {
		width: 24px;
		height: 24px;
		margin-right: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.date-select-back {
		width: 130px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.dateimage {
		width: 16px;
		height: 16px;
		margin-left: 10px;
		margin-right: 3px;
	}

	.date-select-plac {
		font-size: 12px;
		color: #999999;
	}

	.date-select-time {
		font-size: 12px;
		color: #333333;
	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}
</style>
